// import {PropType} from 'vue'

// /**默认卡片 */
// const CCard = defineComponent({
//   props: {
//     titleType: {
//       type: String as PropType<'outside' | 'inside'>,
//       default: 'outside',
//     },
//     title: {
//       type: String,
//       default: '',
//     },
//     subTitle: {
//       type: String,
//       default: '',
//     },
//     showTitle: {
//       type: Boolean,
//       default: true,
//     },
//     isMain: {
//       type: Boolean,
//       default: true,
//     },
//     style: {
//       type: Object,
//       default: {},
//     },
//     id: {
//       type: String,
//       default: '',
//     },
//     cardClass: {
//       type: String,
//       default: '',
//     },
//     dividerClass: {
//       type: String,
//       default: '',
//     },
//   },
//   setup(props, {slots}) {
//     let {titleType, showTitle, cardClass, dividerClass} = toRefs(props)

//     onMounted(() => {})

//     return () => {
//       if (showTitle.value) {
//         return (
//           <div
//             class={[
//               'w-full mx-auto p-4 bg-white rounded relative',
//               props.isMain ? 'shadow-md' : 'shadow',
//             ]}
//             style={props.style}
//             id={props.id}
//           >
//             {titleType.value === 'outside' ? (
//               props.title ? (
//                 <a-divider
//                   class={[
//                     'm-0 absolute top-0 left-1/2 transform -translate-y-full -translate-x-1/2 border-none',
//                     dividerClass.value,
//                   ]}
//                 >
//                   {props.title}
//                 </a-divider>
//               ) : null
//             ) : null}

//             {titleType.value === 'inside' ? (
//               <div class="w-full h-6 mb-4 flex justify-start items-center">
//                 {props.title
//                   ? [
//                       <div
//                         class={[
//                           'w-1',
//                           'h-full',
//                           props.isMain ? 'bg-primary' : 'bg-primary_half',
//                           'mr-4',
//                         ]}
//                       ></div>,
//                       <div class="truncate text-base text-primary">
//                         <span>{props.title || ''}</span>
//                         <span class="text-sm text-black ml-2">
//                           {props.subTitle || ''}
//                         </span>
//                       </div>,
//                     ]
//                   : null}
//                 <div class="flex-1">{slots.title?.()}</div>
//               </div>
//             ) : null}
//             {slots.default?.()}
//             {slots.subContent?.()}
//           </div>
//         )
//       } else {
//         return (
//           <div
//             class="w-full mx-auto my-8 p-4 shadow-md bg-white rounded"
//             style={props.style}
//             id={props.id}
//           >
//             {slots.default?.()}
//             {slots.subContent?.()}
//           </div>
//         )
//       }
//     }
//   },
// })
// export default CCard

import { imagesUrl } from '@/libs/baseUrl'
import { SkeletonProps } from 'ant-design-vue'
import { PropType } from 'vue'
import { CnBoldP } from '../text'

const CCard = defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    spinning: Boolean,
    loading: Boolean,
    skeletonProps: {
      type: Object as PropType<SkeletonProps>,
      default: () => ({})
    },
    canHoverMove: {
      type: Boolean,
      default: false
    },
    titleType: {
      type: String as PropType<'outside' | 'inside'>,
      default: 'outside'
    },
    isMain: {
      type: Boolean,
      default: true
    },
    dividerClass: {
      type: String,
      default: ''
    },
    actived: Boolean,
    onClick: Function as PropType<(e: MouseEvent) => void>,
    vein: Boolean,
    id: String
  },
  setup(props, { slots }) {
    const bodyVeinStyle = computed(() =>
      props.vein
        ? {
            backgroundImage: `url(${imagesUrl('card-vein-block')})`,
            backgroundSize: '245px',
            backgroundPosition: 'right bottom',
            backgroundRepeat: 'no-repeat'
          }
        : {}
    )

    const titleVeinStyle = computed(() =>
      props.vein
        ? {
            backgroundImage: `url(${imagesUrl('card-vein-inline')})`,
            backgroundSize: '100% 100%',
            backgroundPosition: 'right bottom',
            backgroundRepeat: 'no-repeat',
            paddingLeft: '20px',
            paddingRight: '20px'
          }
        : {}
    )

    return () => (
      <div
        id={props.id}
        title={props.title}
        class={[
          'CBC-card bg-white relative rounded-md shadow-card transition-all duration-300 transform flex flex-col',
          props.canHoverMove && !props.actived ? 'hover:-translate-y-4' : '',
          props.actived ? '-translate-y-4 shadow-cardActived' : ''
        ]}
        style={Object.assign(
          {
            padding: '20px 16px 20px 16px'
          },
          bodyVeinStyle.value
        )}
        onClick={e => props.onClick && props.onClick(e)}
      >
        {props.loading ? (
          <a-skeleton
            class='p-16'
            active
            loading={true}
            paragraph={props.skeletonProps.paragraph}
          ></a-skeleton>
        ) : (
          <>
            {/* 卡片标题 */}
            {props.title ? (
              props.titleType === 'outside' ? (
                <a-divider
                  class={[
                    'm-0 absolute top-0 left-1/2 transform -translate-y-full -translate-x-1/2 border-none'
                  ]}
                >
                  {slots.title ? slots.title?.() : props.title}
                </a-divider>
              ) : props.titleType === 'inside' ? (
                <div
                  class={['w-full h-24', props.showTitle ? '' : 'hidden']}
                  style={titleVeinStyle.value}
                >
                  <CnBoldP class='card-title hanzi text-14 text-xText'>
                    {slots.title ? slots.title?.() : props.title}
                  </CnBoldP>
                </div>
              ) : null
            ) : null}

            {/* 卡片内容 */}
            <div class='w-full flex-1'>{slots.default?.()}</div>
          </>
        )}
      </div>
    )
  }
})

export default CCard
